<template>
	<view class="content">
		<!-- <image v-if="userId" style="width: 0;height: 0;position: absolute;top: 0;left: 0;" :src="`https://ywtmp.hnwytkj.com/static/images/${userId}/shareCard.jpg`" mode=""></image> -->
		<view class="top">
			<view class="section">
				<template v-if="info.userProfileDO">
					<view class="section-top">
						<view>{{ info.userProfileDO.realName || '姓名：未填写' }}</view>
						<view class="avatar">
							<image v-if="info.userProfileDO.avatar" :src="info.userProfileDO.avatar" mode="scaleToFill">
							</image>
							<open-data v-else type="userAvatarUrl"></open-data>
						</view>
					</view>
					<view class="section-bottom">
						<image src="https://ywtmp.hnwytkj.com/static/images/pic.png" mode="" class="background-icon">
						</image>
						<view class="section-bottom-content">
							<view>{{ info.userProfileDO.jobTitle || '职务：未填写' }}</view>
							<view class="mt24">{{ info.companyProfileDO.companyName || '公司名称：未填写' }}</view>
							<view class="item-section mt36">
								<image src="https://ywtmp.hnwytkj.com/static/images/phone.png" mode="aspectFit"></image>
								<text>{{ info.userProfileDO.phoneNumber || '未填写' }}</text>
							</view>
							<view class="item-section mt25">
								<image src="https://ywtmp.hnwytkj.com/static/images/wx.png" mode="aspectFit"></image>
								<text>{{ info.userProfileDO.wechatId || '未填写' }}</text>
							</view>
							<view class="item-section mt26 address">
								<image src="https://ywtmp.hnwytkj.com/static/images/address.png" mode="aspectFit">
								</image>
								<text>{{ info.companyProfileDO.address.address || '未填写' }}</text>
							</view>
						</view>
						<view class="edit-btn" @tap="editCard">编辑名片</view>
					</view>
				</template>
				<template v-else>
					<view class="section-top">
						<view>
							<!-- <view>{{ userInfo.nickName }}</view> -->
							<open-data type="userNickName"></open-data>
						</view>
						<view class="avatar">
							<!-- <image :src="userInfo.avatar" mode="aspectFit"></image> -->
							<open-data type="userAvatarUrl"></open-data>
						</view>
					</view>
					<view class="section-bottom">
						<image src="https://ywtmp.hnwytkj.com/static/images/pic.png" mode="" class="background-icon">
						</image>
						<view class="section-bottom-content">
							<view>职务：未填写</view>
							<view class="mt24">公司名称：未填写</view>
							<view class="item-section mt36">
								<image src="https://ywtmp.hnwytkj.com/static/images/phone.png" mode="aspectFit"></image>
								<text>未填写</text>
							</view>
							<view class="item-section mt25">
								<image src="https://ywtmp.hnwytkj.com/static/images/wx.png" mode="aspectFit"></image>
								<text>未填写</text>
							</view>
							<view class="item-section mt26 address">
								<image src="https://ywtmp.hnwytkj.com/static/images/address.png" mode="aspectFit">
								</image>
								<text>未填写</text>
							</view>
						</view>
						<view class="edit-btn" @tap="editCard">编辑名片</view>
					</view>
				</template>
			</view>
			<view class="action-section">
				<view
					v-if="token && info.userProfileDO && info.userProfileDO.realName && info.companyProfileDO.companyName"
					class="action-item">
					<image src="https://ywtmp.hnwytkj.com/static/images/share.png" mode=""></image>
					<text>分享名片</text>
					<button open-type="share"></button>
				</view>
				<view
					v-if="!(token && info.userProfileDO && info.userProfileDO.realName && info.companyProfileDO.companyName)"
					class="action-item" @tap="share">
					<image src="https://ywtmp.hnwytkj.com/static/images/share.png" mode=""></image>
					<text>分享名片</text>
				</view>
				<view class="action-item" @tap="editCard">
					<image src="https://ywtmp.hnwytkj.com/static/images/edit.png" mode=""></image>
					<text>编辑名片</text>
				</view>
				<view class="action-item" @tap="goShare">
					<image src="https://ywtmp.hnwytkj.com/static/images/img.png" mode=""></image>
					<text>拓客海报</text>
				</view>
			</view>
			<view class="num-box">
				<view>{{ info.userProfileDO ? info.userProfileDO.viewCount : 0 }}人浏览</view>
				<view>{{ info.userProfileDO ? info.userProfileDO.likeCount : 0 }}人获赞</view>
			</view>
		</view>
		<view v-if="info.companyProfileDO" class="bottom">
			<template v-for="(item, index) in modules" :key="item">
				<view v-if="modules.includes('companyRadar') && item === 'companyRadar'" class="introduce-item">
					<view class="title">企业雷达</view>
					<view class="introduce-item-content">
						<view class="flex justify-between">
							<view class="item-content">
								<view>
									<view class="num">{{ info.userProfileDO ? info.userProfileDO.shareCount : 0 }}
									</view>
									<view>发送次数</view>
								</view>
							</view>
							<view class="item-content">
								<view>
									<view class="num">{{ info.userProfileDO ? info.userProfileDO.viewCount : 0 }}</view>
									<view>访问人数</view>
								</view>
							</view>
							<view class="item-content">
								<view>
									<view class="num">{{ info.userProfileDO ? info.userProfileDO.linkCount : 0 }}</view>
									<view>引流次数</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="modules.includes('companyImpression') && item === 'companyImpression'"
					class="introduce-item">
					<view class="title">
						<text>企业印象</text>
					</view>
					<view class="introduce-item-content">
						<view class="flex">
							<view v-for="(item, index) in info.companyProfileDO.companyImpression" :key="index"
								class="tag" :style="{ color: item.color, background: calcColor(item.color) }">
								{{ item.text }}</view>
						</view>
					</view>
				</view>
				<view v-if="modules.includes('companyIntro') && item === 'companyIntro'" class="introduce-item">
					<view class="title">
						<text>我的简介</text>
					</view>
					<view class="introduce-item-content">
						<view>{{ info.companyProfileDO.companyIntro }}</view>
					</view>
				</view>
				<view v-if="modules.includes('myImpression') && item === 'myImpression'" class="introduce-item">
					<view class="title">
						<text>我的印象</text>
					</view>
					<view class="introduce-item-content">
						<view class="flex">
							<view v-for="(item, index) in info.companyProfileDO.myImpression" :key="index" class="tag"
								:style="{ color: item.color, background: calcColor(item.color) }">{{ item.text }}</view>
						</view>
					</view>
				</view>
				<view v-if="modules.includes('companyComments') && item === 'companyComments'" class="introduce-item">
					<view class="title">
						<text>企业介绍</text>
					</view>
					<view class="introduce-item-content">
						<view class="swiper">
							<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
								<swiper-item v-for="(item, index) in info.companyProfileDO.companyComments.imgs"
									:key="index">
									<image :src="item" mode="aspectFit"></image>
								</swiper-item>
							</swiper>
						</view>
						<view class="text">{{ info.companyProfileDO.companyComments.content }}</view>
					</view>
				</view>
				<view v-if="modules.includes('companyIntroImg') && item === 'companyIntroImg'" class="introduce-item">
					<view class="title">
						<text>图文介绍</text>
					</view>
					<view class="introduce-item-content">
						<image v-for="(item, index) in info.companyProfileDO.companyIntroImg" :key="index" :src="item"
							mode="widthFix"></image>
					</view>
				</view>
				<view v-if="modules.includes('address') && item === 'address'" class="introduce-item">
					<view class="title">
						<text>企业地址</text>
					</view>
					<view class="introduce-item-content">
						<view class="map">
							<map :latitude="info.companyProfileDO.address.latitude"
								:longitude="info.companyProfileDO.address.longitude" :markers="covers"></map>
						</view>
					</view>
				</view>
				<view v-if="display && modules.includes('companyVideo') && item === 'companyVideo'" class="introduce-item">
					<view class="title">
						<text>视频展示</text>
					</view>
					<view class="introduce-item-content">
						<view class="placeholder">
							<video :src="info.companyProfileDO.companyVideo"></video>
						</view>
					</view>
				</view>
			</template>
		</view>
		<!-- <TabBar/> -->
		<loginModal ref="loginModal" @success="success" />
		<CustomTabBar :selected="0" :display="display"/>
	</view>
</template>

<script>
// import { TabBar } from '@/components/tabbar/index.vue'
import CustomTabBar from '@/components/CustomTabBar/index.vue'
import http from '@/utils/http.js'
import loginModal from '@/components/login/index.vue'
export default {
	components: { loginModal, CustomTabBar },
	data() {
		return {
			token: '',
			userId: '',
			value: 1,
			userInfo: {},
			info: {},
			covers: [
				{
					id: 1,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: "/static/images/location.png",
					width: 30,
					height: 30,
				}
				//  {
				// 	id: 1,
				// 	latitude: 34.341568,
				// 	longitude: 108.940174,
				// 	title: "",
				// 	iconPath: "/static/images/location.png", // 标记点图标
				// 	width: 30,
				// 	height: 30,
				// 	callout: {
				// 		content: "点击导航",
				// 		color: "#ffffff",
				// 		fontSize: 14,
				// 		borderRadius: 10,
				// 		bgColor: "#000000",
				// 		padding: 8,
				// 		display: "ALWAYS"
				// 	}
				// }
			],
			modules: ['companyRadar'],
			modulesMap: {
				'企业印象': 'companyImpression',
				'企业视频': 'companyVideo',
				'企业介绍': 'companyComments',
				'图文展示': 'companyIntroImg',
				'企业地址': 'address',
				'我的简介': 'companyIntro',
				'我的印象': 'myImpression',
				'企业雷达': 'companyRadar'
			},
			display: 0
		}
	},
	/**
 * 页面加载时触发的生命周期钩子函数。
 * @param {Object} options - 页面跳转时传递的参数对象。
 * @param {string} [options.phone] - 可选参数，表示用户手机号。如果存在，则调用手机号登录方法。
 */
	onLoad(options) {
		uni.hideTabBar()
		uni.removeStorageSync('selectedIndex');
		// this.token = uni.getStorageSync('token')
		// this.getData()
		if (options.phone) {
			this.phoneLogin(options)
		}
	},
	onShow() {
		this.userId = uni.getStorageSync('userId')
		this.token = uni.getStorageSync('token')
		if (this.token) {
			this.getData()
		} else {
			this.info = {}
		}
	},
	methods: {
		success() {
			this.userId = uni.getStorageSync('userId')
			this.token = uni.getStorageSync('token')
			if (this.token) {
				this.getData()
			}
		},
		login() {
			// uni.navigateTo({
			// 	url: '/pages/login/index'
			// })
			this.$refs.loginModal.open()
		},
		phoneLogin(options) {
			http({
				url: 'member/auth/phone-app-login',
				method: 'post',
				data: {
					phone: options.phone,
					passWord: options.passWord,
					state: 'mp'
				}
			}).then(res => {
				if (res.code === 0) {
					this.token = res.data.accessToken
					uni.setStorageSync('token', res.data.accessToken);
					uni.setStorageSync('refreshToken', res.data.refreshToken);
					uni.setStorageSync('userId', res.data.userId)
					this.getData()
				}
			})
		},
		hexToRgba(hex, alpha) {
			// 去除可能的'#'字符并检查长度
			hex = hex.replace('#', '');
			if (hex.length !== 6) {
				return ''
			}

			// 解析十六进制为十进制
			let r = parseInt(hex.substr(0, 2), 16);
			let g = parseInt(hex.substr(2, 2), 16);
			let b = parseInt(hex.substr(4, 2), 16);

			// 返回RGBA格式的字符串
			return `rgba(${r}, ${g}, ${b}, ${alpha})`;
		},
		calcColor(color) {
			return this.hexToRgba(color, 0.3)
		},
		editCard() {
			if (!this.token) {
				uni.showModal({
					title: '提示',
					content: '您还未登录，去登录？',
					success: (res) => {
						if (res.confirm) {
							// uni.navigateTo({
							// 	url: '/pages/login/index'
							// })
							this.login()
						}
					}
				});
				return false
			}
			uni.navigateTo({
				url: '/pagesA/edit/editCard'
			})
		},
		share() {
			if (!this.token) {
				uni.showModal({
					title: '提示',
					content: '您还未登录，去登录？',
					success: (res) => {
						if (res.confirm) {
							// uni.navigateTo({
							// 	url: '/pages/login/index'
							// })
							this.login()
						}
					}
				})
				return false
			}
			console.log(this.info.userProfileDO.realName);
			if (!this.info.userProfileDO.realName) {
				uni.showModal({
					title: '提示',
					content: '您还未完善个人信息，无法分享',
					confirmText: '去完善',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pagesA/edit/editEnterpriseInformation'
							})
						}
					}
				})
				return false
			}
			if (!this.info.companyProfileDO.companyName) {
				uni.showModal({
					title: '提示',
					content: '您还未完善企业信息，无法分享',
					confirmText: '去完善',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pagesA/edit/editProfile'
							})
						}
					}
				})
				return false
			}
		},
		goShare() {
			if (!this.token) {
				uni.showModal({
					title: '提示',
					content: '您还未登录，去登录？',
					success: (res) => {
						if (res.confirm) {
							// uni.navigateTo({
							// 	url: '/pages/login/index'
							// })
							this.login()
						}
					}
				});
				return false
			}
			uni.navigateTo({
				url: '/pagesA/my/poster'
			})
		},
		saveShare() {
			const userId = uni.getStorageSync('userId')
			if (userId) {
				http({
					url: 'card/user-profile/like/update',
					method: 'put',
					data: {
						userId,
						type: 1
					}
				})
			}
		},
		getData() {
			uni.getUserInfo({
				desc: '登录的数据',
				success(ures) {
					console.log(ures, '返回的用户信息');
					this.userInfo = ures.userInfo
					//这个地方的用户信息无论登录成功失败都可以拿到，只是拿到用户的信息
					//在成功的回调中去使用微信登录

				}
			});
			const token = uni.getStorageSync('token');
			if (token) {
				http({
					url: 'card/user-profile/get'
				}).then(res => {
					if (res.code === 0) {
						this.display = res.data.display || 0
						res.data.companyProfileDO.address = (res.data.companyProfileDO.address ? JSON.parse(res.data.companyProfileDO.address) : {})
						if (res.data.companyProfileDO.address) {
							this.covers[0].latitude = res.data.companyProfileDO.address.latitude
							this.covers[0].longitude = res.data.companyProfileDO.address.longitude
						}
						res.data.companyProfileDO.companyImpression = res.data.companyProfileDO.companyImpression ? JSON.parse(res.data.companyProfileDO.companyImpression) : []
						res.data.companyProfileDO.myImpression = res.data.companyProfileDO.myImpression ? JSON.parse(res.data.companyProfileDO.myImpression) : [],
							res.data.companyProfileDO.companyComments = res.data.companyProfileDO.companyComments ? JSON.parse(res.data.companyProfileDO.companyComments) : {},
							res.data.companyProfileDO.companyIntroImg = res.data.companyProfileDO.companyIntroImg ? JSON.parse(res.data.companyProfileDO.companyIntroImg) : [],
							// res.data.companyProfileDO.myImpression = res.data.companyProfileDO.myImpression ? JSON.parse(res.data.companyProfileDO.myImpression) : []						
							this.info = {
								...res.data
							}
						const modules = res.data.companyProfileDO.sort ? res.data.companyProfileDO.sort.split(',') : []
						if (modules.includes('companyRadar')) {
							this.modules = modules
						} else {
							this.modules = ['companyRadar'].concat(modules)
						}
					}
				})
			}
			// else {
			// 	uni.getUserInfo({
			// 		desc: '登录的数据',
			// 		success(ures) {
			// 			console.log(ures, '返回的用户信息');
			// 			//这个地方的用户信息无论登录成功失败都可以拿到，只是拿到用户的信息
			// 			//在成功的回调中去使用微信登录

			// 		}
			// 	});
			// }			
		}
	},
	onShareAppMessage() {
		const userId = uni.getStorageSync('userId')
		this.saveShare()
		console.log(userId);
		console.log(this.info.userProfileDO);
		
		return {
			title: '您好，这是我的名片，请惠存',
			path: `/pagesA/share/card?id=${userId}&encrypted=${this.info.userProfileDO.level}`, // 分享的路径
			imageUrl: `https://ywtmp.hnwytkj.com/static/images/${userId}/shareCard.jpg?t=${Math.random()}` // 可选，分享图片的路径
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	font-family: PingFang SC;
	padding-bottom: calc(160rpx + var(--safe-area-inset-bottom) + 60rpx);

	.top {
		height: 918rpx;
		padding: 60rpx 30rpx 0;
		background-image: linear-gradient(180deg, #4B73FF, #FFFFFF);

		.section {
			height: 617rpx;
			border-radius: 20rpx;
			background: #EEF2FF;

			.section-top {
				height: 117rpx;
				position: relative;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #333333;
				line-height: 117rpx;
				padding-left: 42rpx;

				.avatar {
					width: 150rpx;
					height: 150rpx;
					background: #FFFFFF;
					border-radius: 50%;
					border: 6rpx solid #90BCFF;
					position: absolute;
					z-index: 10;
					right: 40rpx;
					top: 40rpx;
					// padding: 6rpx 0 0 6rpx;
					box-sizing: border-box;
					overflow: hidden;

					image {
						// width: 138rpx;
						// height: 138rpx;
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}

			.section-bottom {
				height: 500rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				// background-image: url('/static/images/pic.png');
				// background-size: 262rpx 278rpx;
				// background-position: 388rpx 152rpx;
				position: relative;

				.background-icon {
					width: 262rpx;
					height: 278rpx;
					position: absolute;
					right: 40rpx;
					bottom: 70rpx;
				}

				.section-bottom-content {
					padding: 40rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					position: relative;
					z-index: 9;

					.item-section {
						display: flex;
						// align-items: center;
						font-weight: bold;
						line-height: 48rpx;

						image {
							width: 48rpx;
							height: 48rpx;
							margin-right: 30rpx;
						}

						text {
							flex: 1;
						}

						&.address {
							line-height: 50rpx;
						}
					}
				}

				.edit-btn {
					width: 180rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					background: #DDE5FF;
					border-radius: 20rpx 0px 20rpx 0px;
					font-weight: 500;
					font-size: 28rpx;
					color: #7495FF;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}
		}

		.action-section {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.action-item {
				width: 217rpx;
				height: 150rpx;
				background: #E6FFEC;
				border-radius: 20rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #28C24D;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 17rpx;
				}

				&:nth-child(2) {
					background: #FFF3DD;
					color: #FF921D;
				}

				&:nth-child(3) {
					background: #D9F7FF;
					color: #24AAFF;
				}

				button {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					opacity: 0;
				}
			}
		}

		.num-box {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.bottom {
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px #EEEEEE;
		border-radius: 40rpx 40rpx 0 0;

		.introduce-item {
			box-shadow: 0px 0px 20rpx 0px #EEEEEE;
			border-radius: 40rpx 40rpx 0 0;
			padding-top: 50rpx;

			.title {
				font-weight: bold;
				font-size: 34rpx;
				color: #333333;
				padding-left: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					padding-right: 30rpx;

					image {
						width: 70rpx;
						height: 70rpx;

						&:nth-child(2) {
							margin: 0 20rpx;
						}
					}
				}
			}

			.introduce-item-content {
				padding: 40rpx 30rpx 50rpx;

				.tag {
					width: 207rpx;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					background: #EAFBF5;
					border-radius: 35rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #17B185;
					margin-right: 20rpx;

					&.tag2 {
						// background: #EAF1FB;
						background: rgba(23, 95, 177, 0.3);
						color: #175FB1;
					}
				}

				.item-content {
					width: 217rpx;
					height: 192rpx;
					background: #F4F7FF;
					border-radius: 20rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;

					.num {
						font-family: DIN Next LT Pro;
						font-size: 50rpx;
					}
				}

				.placeholder {
					height: 400rpx;
					background: #F4F7FF;
					border-radius: 20rpx;
					overflow: hidden;

					video {
						width: 100%;
						height: 100%;
					}
				}

				image {
					width: 100%;
					height: 400rpx;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
				}

				.swiper {
					margin-bottom: 20rpx;
				}

				.text {
					font-size: 28rpx;
				}

				.map {
					map {
						width: 100%;
						height: 400rpx;
					}
				}

				.add-btn {
					height: 240rpx;
					background: #F3F6FF;
					border-radius: 20rpx;
					border: 2rpx dashed #A7BBFF;
					font-weight: bold;
					font-size: 34rpx;
					color: #C3D0FF;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 123rpx;
						height: 136rpx;
						margin-right: 50rpx;
					}
				}
			}
		}
	}
}
</style>
